<template>
  <div class="acceptance padbottom">
    <van-checkbox-group v-model="result">
      <div v-for="(item, index) in acceptData.list" :key="index" class="module">
        <van-cell-group>
          <van-cell
            v-if="currentNode == 'T10351' || currentNode == 'T10093'"
            class="choose"
          >
            <van-checkbox
              shape="square"
              icon-size="14px"
              checked-color="#009966"
              :name="item.id"
            ></van-checkbox>
          </van-cell>
          <van-field
            v-model="item.involve_system_name"
            label="涉及系统"
            input-align="right"
            label-class="labelColor"
            placeholder="系统名称"
            readonly
          />
          <van-field
            v-model="item.address"
            rows="1"
            autosize
            label-class="labelColor"
            input-align="right"
            label="验证地址"
            placeholder="地址"
            type="textarea"
            :readonly="!isAcceptance"
          />
          <van-field
            v-model="item.username"
            label="用户名"
            input-align="right"
            label-class="labelColor"
            placeholder="用户名"
            :readonly="!isAcceptance"
          />
          <van-field
            v-model="item.password"
            label="密码"
            input-align="right"
            label-class="labelColor"
            placeholder="密码"
            :readonly="!isAcceptance"
          />
          <van-field
            v-model="item.instruction"
            rows="1"
            autosize
            label-class="labelColor"
            input-align="right"
            label="说明"
            placeholder="说明"
            type="textarea"
            :readonly="!isAcceptance"
          />
        </van-cell-group>
      </div>
    </van-checkbox-group>
    <div v-if="currentNode != 'T10120'" class="module">
      <van-cell-group>
        <van-field
          v-model="acceptData.person_date"
          label="建议用户确认反馈时间"
          label-width="10em"
          input-align="right"
          label-class="labelColor"
          placeholder="建议用户确认反馈时间"
          readonly
        />
        <!-- <van-field
          v-if="currentNode == 'T10093' || currentNode == 'T10351'"
          v-model="acceptData.person_date"
          is-link
          label-class="labelColor"
          readonly
          label-width="10em"
          arrow-direction="down"
          label="建议用户确认反馈时间"
          @click="getDate(1)"
          input-align="right"
          placeholder="请选择"
        />
        <van-field
          v-else
          v-model="acceptData.person_date"
          label="建议用户确认反馈时间"
          label-width="10em"
          input-align="right"
          label-class="labelColor"
          placeholder="建议用户确认反馈时间"
          readonly
        /> -->
      </van-cell-group>
    </div>
    <van-calendar
      v-model="show"
      :show-confirm="false"
      color="#009966"
      @confirm="onConfirm"
    />
    <div v-if="isCurrentNode" class="form-btn">
      <div class="btn btn-color1" @click="handleMoreOpera">更多操作</div>
      <!-- <div class="btn btn-color2">保存</div> -->
      <div class="btn btn-color3" @click="submit">提交</div>
    </div>
    <van-action-sheet
      v-model="showMoreOpera"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import {
  serviceHarvest,
  serviceHarvestSubmit,
  personDate,
  onlineInit,
} from "@/api/service.js";
import { Toast } from "vant";

export default {
  props: ["id", "currentNode", "baseData"], //服务单id
  data() {
    return {
      text: "13123123",
      date: "",
      show: false,
      actions: [{ name: "OA流程" }, { name: "审批记录" }],
      showMoreOpera: false,
      acceptData: {},
      isCurrentNode: true, //是否在当前节点下操作
      isAcceptance: true, //是否是用户验收节点
      result: [],
    };
  },
  mounted() {
    if (this.id) {
      this.getHarvestData();
      this.checkNode();
    }
  },
  methods: {
    handleMoreOpera() {
      this.showMoreOpera = true;
    },
    onCancel() {
      this.showMoreOpera = false;
    },
    //检查是否是当前节点
    checkNode() {
      console.log(this.currentNode);
      if (
        this.currentNode == "T10120" ||
        this.currentNode == "T10351" ||
        this.currentNode == "T10093" ||
        this.currentNode == "T10272" ||
        this.currentNode == "T10320"
      ) {
        this.isCurrentNode = true;
      } else {
        this.isCurrentNode = false;
      }
      if (this.currentNode == "T10120") {
        this.isAcceptance = true;
      } else {
        this.isAcceptance = false;
      }
    },
    submit() {
      // Toast("提交");
      if (this.currentNode == "T10093") {
        onlineInit({
          server_id: this.id,
        }).then((res) => {
          if (res.code != 200) {
            Toast(res.message);
          }
        });
      }
      if (this.currentNode == "T10120") {
        serviceHarvestSubmit({
          node_id: this.currentNode,
          server_harvest_id: this.acceptData.list[0].id,
          address: this.acceptData.list[0].address,
          username: this.acceptData.list[0].username,
          password: this.acceptData.list[0].password,
          instruction: this.acceptData.list[0].instruction,
        }).then((res) => {
          if (res.code == 200) {
            this.$router.push({
              path: "/service/node-flow",
              query: {
                id: this.id,
                showUser: false,
                source: this.currentNode,
              },
            });
          } else {
            Toast(res.message);
          }
        });
      } else if (this.currentNode == "T10351" || this.currentNode == "T10093") {
        this.$router.push({
          path: "/service/node-flow",
          query: {
            id: this.id,
            source: this.currentNode,
            idgroup: this.result,
            backInfo: this.baseData,
          },
        });
      } else {
        this.$router.push({
          path: "/service/node-flow",
          query: {
            id: this.id,
            source: this.currentNode,
            backInfo:this.baseData
          },
        });
      }
    },
    onSelect(active, index) {
      console.log(active, index);
      if (active.name == "审批记录") {
        this.$router.push({
          path: "/service/approvalRecord",
          query: {
            id: this.id,
          },
        });
      } else if (active.name == "OA流程") {
        this.$router.push({
          path: "/service/oaFlow",
          query: {
            id: this.id,
          },
        });
      }
    },
    //获取时间
    getDate() {
      this.show = true;
    },
    onConfirm(value) {
      console.log(value);
      this.acceptData.person_date = this.formatDate(value);
      personDate({
        server_id: this.id,
        person_date: this.acceptData.person_date,
      }).then((res) => {
        if (res.code != 200) {
          Toast(res.message);
        }
      });
      this.show = false;
    },
    formatDate(date) {
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      return `${date.getFullYear()}-${month}-${day}`;
    },
    getHarvestData() {
      serviceHarvest({
        server_id: this.id,
        node_id: this.currentNode,
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          if (res.data.list.length > 0) {
            this.acceptData = res.data;
          } else {
            this.acceptData.list = [
              {
                involve_system_name: "",
                address: "",
                username: "",
                password: "",
                instruction: "",
              },
            ];
          }
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.acceptance.padbottom {
  padding-bottom: 100px;
}
.module {
  margin-top: 12px;
}
/deep/.labelColor {
  color: rgba(49, 53, 65, 0.6);
}
/deep/.van-field__control {
  color: #313541;
}
.form-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #fff;
  height: 34px;
  padding: 13px 15px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
  .btn {
    flex: 1;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    margin-right: 6px;
    border-radius: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  .btn-color1 {
    background: rgba(147, 157, 173, 0.18);
    color: #313541;
  }
  .btn-color3 {
    background: #009966;
    color: #fff;
  }
}
</style>